<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "五大基础类数据" }}</span>
    </div>
    <div class="body">
      <div id="data-assemble__chart2"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "a2-chart",
  props: {
    base5Name: {
      type: Array,
      default: () => [],
    },
    base5Value1: {
      type: Array,
      default: () => [],
    },
    // base5Value2: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  data() {
    return {
      xdata: [],
      ydata1: [],
      // ydata2: [],
    };
  },
  methods: {
    registerAndSetCharts() {
      let chartsRef = this.$echarts.init(
        document.getElementById("data-assemble__chart2")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "5%",
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        yAxis: [
          {
            type: "value",
            boundaryGap: [0, 0.1],
            axisLabel: {
              color: "#666",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#eee",
              },
            },
          },
          {
            type: "value",
            boundaryGap: [0, 0.1],
            splitLine: {
              show: false,
            },
          },
        ],
        xAxis: {
          type: "category",
          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          data: this.base5Name,
          axisLabel: {
            color: "#666",
          },
          axisLine: {
            lineStyle: {
              color: "#eee",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "总数据",
            type: "bar",
            barWidth: 10,
            // data: [382, 934, 290, 1049, 321, 312, 321],
            data: this.ydata1,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#7F68FF" },
              { offset: 1, color: "#BFB3FF" },
            ]),
          },
          // {
          //   name: "总数据",
          //   type: "line",
          //   smooth: true,
          //   barWidth: 10,
          //   yAxisIndex: "1",
          //   // data: [225, 438, 300, 294, 321, 221, 231],
          //   data: this.ydata1,
          //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     { offset: 0, color: "#3191FF" },
          //     { offset: 1, color: "#70BDFF" },
          //   ]),
          // },
        ],
      };
      chartsRef.setOption(option);
    },
  },
  mounted() {
    this.registerAndSetCharts();
  },
  watch: {
    base5Name(n) {
      this.xdata = n;
      this.registerAndSetCharts();
    },
    base5Value1(n) {
      this.ydata1 = n;
    },
    base5Value2(n) {
      this.ydata2 = n;
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 300px;
    :first-child {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
